<style lang="less" scoped>
    @import './order.less';
</style>

<template>
    <Div class="code">
        <Row class="form">
        	<Form :model="searchForm">
        		<Col class="order_num">
        			<FormItem>
        				<Label>订单号</Label>
        				<Input placeholder="订单号" v-model="searchForm.order_number"></Input>
        			</FormItem>
        		</Col>
	        	<Col class="shop_name">
					<FormItem>
						<Label>门店名称</Label>
						<i-select filterable clearable v-model="searchForm.store_id">
							<Option v-for="item in stores" :key="item.id" :value="item.id">{{ item.store_name }}</Option>
						</i-select>
					</FormItem>
				</Col>
	        	<Col class="pay">
					<FormItem>
						<Label>支付方式</Label>
						<i-select v-model="searchForm.pay_software" clearable>
							<i-option :value="1">微信</i-option>
							<i-option :value="2">支付宝</i-option>
						</i-select>
					</FormItem>
				</Col>
	        	<Col class="time">
					<FormItem>
						<Label>选择时间</Label>
						<DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" @on-change="handleTimeStart"></DatePicker>
						<span>-</span>
						<DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" @on-change="handleTimeEnd"></DatePicker>
					</FormItem>
				</Col>
	        	<Col class="seach-btn" :xs="2">
					<Button icon="ios-search" @click="handleSearch">
						查询
					</Button>
				</Col>
        	</Form>
        	
        </Row>
		<Row class="card">
			<Col :lg="7" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="money"></i>
					<Div>
						<h3>实收总金额</h3>
						<h1>
							<span>{{ amount }}</span>
						</h1>
					</Div>
				</Card>
			</Col>
			<Col :lg="6" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="order"></i>
					<Div>
						<h3>支付成功笔数</h3>
						<h1>
							<span>{{ count }}笔</span>
						</h1>
					</Div>
				</Card>
			</Col>
			<Col :lg="7" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="num"></i>
					<Div style="width:60%;">
						<p v-for="item in channels" :key="item.amount">
							<span>{{ item.channel }}</span><span class="fr"><span>{{ item.amount.toFixed(2) }}</span></span>
						</p>
					</Div>
				</Card>
			</Col>
		</Row>
		<Row>
			<Table :columns="columns" :data="orderList"></Table>
			<Page :total="page.total" :current.sync="page.current" show-elevator show-total :page-size="page.size" @on-change="handleChangePage" class-name="page"></Page>
		</Row>
		
		<Modal v-model="modal" title="订单详情" :mask-closable="false">
			<ul>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">订单号：{{ orderNum }}</li>
				<!-- <li style="padding-bottom:5px;display:inline-block;width:49%;">商品二维码名称：{{ codeName }}</li> -->
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付方式：{{ pay }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">应收金额：{{ payMoney }}</li>
				<!-- <li style="padding-bottom:5px;display:inline-block;width:49%;">商家优惠活动：{{ discount }}</li> -->
				<li style="padding-bottom:5px;display:inline-block;width:49%;">交易状态：{{ payState }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付流水：{{ payNum }} </li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付时间：{{ payTime }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付通道：{{ code }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">实收金额：{{ money }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">订单备注：{{ marks }}</li>
			</ul>
			<Div slot="footer"></Div>
		</Modal>
    </Div>
</template>
<script>
	import CountTo from '../count-to/CountTo.vue'
	import { handleCodeInit, storesInit, orderList, handleCodeChangePage, handleCodeSearch } from '@/api/order'

	export default {
		components: {
			CountTo
		},
		name: 'order_code',
		data(){
			return{
				modal: false,
				amount: 0,
				count: 0,
				codeName: '',
				orderNum: '',
				payNum: '',
				pay: '',
				payTime: '',
				payMoney: '',
				code: '',
				discount: '',
				money: '',
				payState: '',
				marks: '',				
				mainStyle:{
					fontSize: 'inherit',
					fontWeight: 'inherit'
				},
				columns:[
					{
						title: "订单号",
						key: "order_number",
						align: 'center'
					},
					{
						title: "门店名称",
						key: 'store_name',
						align: 'center'
					},
					// {
					// 	title: '商品二维码名称',
					// 	key: "code_name",
							// align: 'center'
					// },
					{
						title: '付款金额',
						key: 'amount',
						align: 'center'
					},
					{
						title: '支付方式',
						key: "pay_software",
						align: 'center'
					},
					{
						title: '支付时间',
						key: 'pay_at',
						align: 'center'
					},
					{
						title: '支付状态',
						key: 'pay_status',
						align: 'center'
					},
					{
						title: '操作',
						align: 'center',
						render:(h,params) => {
							return h('Button',{
								props:{
									type: 'text'
								},
								style:{
									color: '#0078ff',
									padding: 0
								},
								on: {
									click: ()=>{
										this.show(params.row.id)
									}
								}
							},"查看")
						}
					}
				],
				orderList:[],
				searchForm: {
					order_number: '',
					store_id: '',
					pay_software: '',
					start: '',
					end: ''
				},
				page: {
					total: 0,
					size: 1,
					current: 1
				},
				channels: [],
				stores: []
			}
		},
		methods:{
			show(index) {
				orderList(index).then(response => {
					this.orderNum = response.data.data.order_number
					this.pay = response.data.data.pay_software
					this.payMoney = response.data.data.amount
					this.payState = response.data.data.pay_status
					this.payNum = response.data.data.trade_no
					this.payTime = response.data.data.pay_at
					this.code = response.data.data.pay_channel
					this.money = response.data.data.arrive_mount
					this.marks = response.data.data.remarks
					this.modal = true
				})
			},
			init() {
				handleCodeInit().then(response => {
					this.orderList = response.data.data.orders
					this.amount = response.data.data.amount
					this.count = response.data.data.count
					this.channels = response.data.data.channels
					this.page.total = response.data.data.total
					this.page.size = response.data.data.size
					this.page.current = response.data.data.page
				})
				storesInit().then(response => {
					this.stores = response.data.data.stores
				})
			},
			handleTimeStart(v) {
				this.searchForm.start = v
			},
			handleTimeEnd(v) {
				this.searchForm.end = v
			},
			handleSearch() {
				handleCodeSearch(this.searchForm).then(response => {
					this.orderList = response.data.data.orders
					this.page.total = response.data.data.total
					this.page.size = response.data.data.size
					this.page.current = response.data.data.page
				})
			},
			handleChangePage(v) {
				handleCodeChangePage(v, this.searchForm).then(response => {
					this.orderList = response.data.data.orders
					this.page.total = response.data.data.total
					this.page.current = response.data.data.page
				})
			}
		},
		created() {
			this.init()
		}
	}
</script>